<template>
    <div>
       <!-- tab栏 -->
       <div class="head">
            <image :src="src1" class="headd" resize="cover" @click="biu()"></image>
            <div class="shop_name">
                <text class="shop" @click="show_shop()">商品</text>
                <text class="shop" @click="show_category()">分类</text>
            </div>
        </div> 
        <div class="line">
            <div class="line1" v-if="show"></div>
            <div class="line2" v-if="!show"></div>
        </div>
        <div class="search_key" v-if="jun">
            <image :src="src2" class="search_img"></image>
            <input type="text" placeholder="在这里输入搜索商品名称" class="search_inp" />
        </div>
        <div class="show_text" v-if="jun">
            <text class="text1">{{item1}}</text>
            <text class="text2">共{{item2}}件</text>
        </div>
        <div @click="goGoodsDetile()" class="goods" v-for="( index,item ) in list" :key="index.item" v-if="jun">
            <image :src="index.src" class="goo1"></image>
            <div class="goo_text">
                <div class="ho_text">
                    <text class="jj_text">{{index.name}}</text>
                    <text class="ll_text">{{index.bu5}}</text>
                </div>
                <div class="h_text">
                    <image :src="index.src2" class="h_img"></image>
                    <text class="hh_text">已售</text>
                    <text class="hhh_text">{{index.bu3}}</text>
                    <image class="kk_img" :src="index.src3"></image>
                    <text class="hh_text">库存</text>
                    <text class="hhh_text">{{index.bu4}}</text>
                </div>
                <div class="button_group">
                    <text class="gr1">{{index.bu1}}</text>
                    <text class="gr2">{{index.bu2}}</text>
                </div>
            </div>
        </div>
        <div class="meau_shop" v-if="maeu">
            <text class="inded">共有{{ind}}个商品,包含商品{{inx}}件</text>
        </div>
        <div class="list_shop" v-if="maeu">
            <div class="goodss" v-for="(index,item) in list2" :key="index.item">
               <text class="goods_1">{{index.coo}}</text> 
               <image class="goods_pic" :src="index.src"></image>
               <text class="shop_text2">{{index.name}}</text>
            </div>
            <div class="foo" v-if="maeu">
                <image class="foo1" :src="ste"></image>
            </div>
        </div>
         <!-- 删除商品的弹窗 -->
         <div class="wrap" v-if="show013">
            <div class="wqqq" v-if="show013"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">店长：您确定要删除这个商品吗？</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11">取消</text>
                  <text class="duanxin11">确定</text>
                </div>
              </div>
            </div>
         </div>
         <!-- 编辑成功的弹窗 -->
         <div class="wrap" v-if="show013">
            <div class="wqqq" v-if="show013"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">店长：商品编辑完成啦,可以进行下面的操作啦！</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11">重新上架</text>
                  <text class="duanxin11">查看详情</text>
                </div>
              </div>
            </div>
         </div> 
         <!-- 发布成功的弹窗 -->
        <div class="wrap" v-if="show012">
            <div class="wqqq" v-if="show012"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">店长：商品成功咯~可以对商品继续操作哦！</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11">上架</text>
                  <text class="duanxin11">查看</text>
                </div>
              </div>
            </div>
         </div> 
    </div>
</template>
<style scoped>
    .meau_shop{
        width: 100%;
        height: 13px;
        /*background-color: pink;*/
        margin-top: 32px;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }
    .inded{
        height: 13px;
        line-height: 13px;
        color: #999;
        font-size: 13px;
    }
    .list_shop{
        width: 100%;
        min-height: 113px;
        /*background-color: pink;*/
        flex-direction: row;
        justify-content: space-between;
        padding-top: 20px; 
        padding-left: 12px;
        padding-right: 12px;
        flex-wrap: wrap;
    }
    .foo{
        width: 159px;
        height: 113px;
        background-color: silver;
        justify-content: center;
        align-items: center;
    }
    .goodss{
        width: 159px;
        height: 113px;
        background-color: pink;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        margin-bottom: 35px;
    }
    .foo1{
        width: 51px;
        height: 51px;
    }
    .goods_1{
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 15px;
        font-weight: bold;
        z-index: 2;
    }
    .goods_pic{
        width: 159px;
        height: 113px;
        z-index: 1;
    }
    .shop_text2{
        width: 159px;
        height: 113px;
        text-align: center;
        line-height: 113px;
        font-size: 18px;
        color: #33c179;
        z-index: 3;
        position: absolute;
    }
</style>
<style scoped>
    .head{
        width: 100%;
        height: 48px;
        padding-top: 12px;
        /*background-color: pink;*/
        box-sizing: border-box;
        line-height: 32px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /*margin-top: 17px;*/
       /* position: fixed;
        top: 0;
        left: 0;*/
        /*box-shadow: 1px 1px 1px #ccc;*/
        background-color: #fff;
        /*position: relative;*/
        /*z-index: 2; */
    }
    .headd{
        width: 15px;
        height: 20px;
        /*background-color: #33c179;*/
        /*position: fixed;*/
        position: absolute;
        left: 12px;
    }
   .shop_name{
        width: 98px;
        flex-direction: row;
        /*background-color: pink;*/
        justify-content: space-between;
   }
    .shop{
        font-size: 16px;
        font-weight: bold;
    }
    .line{
        width: 118px;
        height: 4px;
        margin-left: auto;
        margin-right: auto;
        /*background-color: pink;*/
        flex-direction: row;
        position: relative;
        justify-content: space-between;
        position: relative;
    }
    .line1{
        width: 48px;
        height: 4px;
        background-color: #33c179;
        border-radius: 25px;
        position: absolute;
        left: 0;
    }
    .line2{
        width: 48px;
        height: 4px;
        background-color: #33c179;
        border-radius: 25px;
        position: absolute;
        right: 0;
    }
    .search_key{
        width: 300px;
        height: 37px;
        border-radius: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 21px;
        /*background-color: pink;*/
        position: relative;
        border: solid 1px #c4c4c4;
    }
    .search_img{
        width: 15px;
        height: 15px;
        position: absolute;
        left: 48px;
        top: 10px;
        z-index: 2;
    }
    .search_inp{
        width: 200px;
        height: 17px;
        line-height: 17px;
        font-size: 13px;
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 20px;
    }
    .show_text{
        width: 100%;
        height: 15px;
        margin-top: 32px;
        /*background-color: pink;*/
        flex-direction: row;
        padding-left: 12px;
    }
    .text1{
        height: 15px;
        line-height: 15px;
        font-size: 15px;
        color: #333;
    }
    .text2{
        height: 13px;
        line-height: 13px;
        font-size: 13px;
        color: #666;
        margin-left: 20px;
        margin-top: 2px;
    }
    .goods{
        width: 343px;
        height: 118px;
        /*background-color: pink;*/
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        flex-direction: row;
        justify-content: space-between;
    }
    .goo1{
        width: 107px;
        height: 118px;
        /*background-color: red;*/
    }
    .goo_text{
        width: 228px;
        height: 118px;
        /*background-color: silver;*/
        flex-direction: column;
        box-sizing: border-box;
        justify-content: space-between;
    }
    .ho_text{
        width: 100%;
        height: 15px;
        box-sizing: border-box;
        flex-direction: row;
        /*background-color: green;*/
        margin-top: 10px;
        justify-content: space-between;
    }
    .h_text{
        width: 100%;
        height: 15px;
        /*background-color: orange;*/
        flex-direction: row;
        margin-top: 26px;
    }
    .button_group{
        width: 100%;
        height: 23px;
        /*background-color: red;*/
        margin-top: 25px;
        flex-direction: row;
        box-sizing: border-box;
    }
    .gr1{
        width: 53px;
        height: 23px;
        background-color: #33c179;
        border-radius: 25px;
        text-align: center;
        line-height: 23px;
        color: #fff;
        margin-left: 93px;
    }
    .gr2{
        width: 53px;
        height: 23px;
        background-color: #33c179;
        border-radius: 25px;
        text-align: center;
        line-height: 23px;
        color: #fff;
        margin-left: 28px;
    }
    .h_img{
        width: 17px;
        height: 15px;
        /*background-color: yellow;*/
    }
    .hh_text{
        height: 13px;
        line-height: 13px;
        margin-left: 11px;
        font-size: 13px;
        color: #666;
        margin-top: 2px;
    }
    .hhh_text{
        height: 13px;
        line-height: 13px;
        margin-left: 12px;
        font-size: 13px;
        margin-top: 2px;
        color: #666;
    }
    .kk_img{
        width: 15px;
        height: 15px;
        margin-left: 58px;
        /*background-color: red;*/
    }
    .jj_text{
        height: 15px;
        line-height: 15px;
        color: #333;
        font-size: 15px;
    }
    .ll_text{
        height: 13px;
        line-height: 13px;
        font-size: 13px;
        margin-top: 2px;
        color: #33c179;
    }
    .wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .www123{
      color: #33c179;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 299;
      opacity: .9;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 300;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
      /*flex-direction: row;*/  
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
      flex-direction: row;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11,.duanxin11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
</style>
<script>
export default {
    data () {
        return {
          src1: 'http://192.168.2.123:8080/img/index_back.png',
          show: true,
          src2: 'http://192.168.2.123:8080/img/shopping_search.png',
          // src3: 'http://192.168.2.123:8080/img/shop_add1.png',
          jun: true,
          item1: '行车记录仪',
          ste: 'http://192.168.2.123:8080/img/shop_add1.png',
          item2: '4',
          show012: false,
          srcpic: 'http://192.168.2.123:8080/img/header.jpg',
          ind: '5',
          inx: '100',
          maeu: false,
          show013: false, //商品编辑成功
          list: [
            {
                bu1: '编辑',
                bu2: '删除',
                bu3: '256',
                bu4: '600',
                bu5: '已上架',
                name: '零售-赵李琛',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                src2: 'http://192.168.2.123:8080/img/shopping_inventory.png',
                src3: 'http://192.168.2.123:8080/img/shopping_saled.png',
            },
            {
                bu1: '编辑',
                bu2: '删除',
                bu3: '256',
                bu4: '600',
                bu5: '已上架',
                name: '绝版-赵李琛',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                src2: 'http://192.168.2.123:8080/img/shopping_saled.png',
                src3: 'http://192.168.2.123:8080/img/shopping_inventory.png',
            },
            {
                bu1: '编辑',
                bu2: '删除',
                bu3: '256',
                bu4: '600',
                bu5: '已上架',
                name: '批发--赵李琛',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                src2: 'http://192.168.2.123:8080/img/shopping_inventory.png',
                src3: 'http://192.168.2.123:8080/img/shopping_saled.png',
            },
            {
                bu1: '编辑',
                bu2: '删除',
                bu3: '256',
                bu4: '600',
                bu5: '已上架',
                name: '限量版-赵李琛',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                src2: 'http://192.168.2.123:8080/img/shopping_inventory.png',
                src3: 'http://192.168.2.123:8080/img/shopping_saled.png',
            }
          ],
          list2: [
            {
                coo: '10',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                name: '赵李琛-特卖',
            },
            {
                coo: '10',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                name: '赵李琛-特卖',
            },
            {
                coo: '10',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                name: '赵李琛-特卖',
            },
            {
                coo: '10',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                name: '赵李琛-特卖',
            },
            {
                coo: '10',
                src: 'http://192.168.2.123:8080/img/header.jpg',
                name: '赵李琛-特卖',
            },
          ]
        }
    },
    methods: {
        goGoodsDetile(){
            this.$router.push("/shop_commodity")
        },
        // 点击返回
        biu(){
            this.$router.back(-1);
        },
        // 点击商品
        show_shop(){
            this.show = true;
            this.jun = true;
            this.maeu = false;
        },
        // 点击分类
        show_category(){
            this.show = false;
            this.jun = false;
            this.maeu = true;
        },
        shopAdd(){
            this.$router.push('/shop_add_goods');
        }

    }
}
</script>